/**
 * panel 上中下布局
 */

.su-panel {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0
}

.su-panel .su-panel-content {
	flex: 1;
	overflow: auto
}

.su-panel .su-panel-bottom {
	height: 130upx;
	padding: 25upx 0upx
}

.su-panel-bottom, 
.su-page-bottom {
	padding: 0;
	background-color: --color(--p-bg-fb);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	z-index: 111;
}

.su-page-bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 15upx 24upx;
	
	.su-button-white.left {
		margin-right: 14upx;
	}
}

.su-page-bottom.flow {
	padding: 0;
}

.su-center-button {
	margin-top: 24upx;
	padding: 0 38upx;
}

.su-page-bottom::before {
	content: " ";
	width: 200%;
	height: 200%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	-webkit-transform: scale(.5);
	transform: scale(.5);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	box-sizing: border-box;
	pointer-events: none;
	border: 1upx solid --color(--p-border-color);
}

.su-panel-bottom.top::before {
	top: 0
}

.su-panel-bottom .left .su-all-border::before {
	height: 168upx !important;
	border-radius: 85upx;
	border-color: --color(--p-border-color)
}

.su-panel-bottom .left button {
	color: --color(--p-text-63);
	background-color: --color(--p-white)
}

.su-panel-bottom .right button {
	margin-left: 30upx;
	background-color: $maincolor;
	color: --color(--p-white)
}

.su-panel-bottom .left button:active {
	background-color: --color(--p-white-active)
}

.su-panel-bottom .right button:active {
	background-color: --color(--maincolor-active)
}

.su-panel-bottom .left button::after,
.su-panel-bottom .right button::after {
	border: 0
}

.su-panel-bottom .left button,
.su-panel-bottom .right button {
	width: 330upx;
	height: 85upx;
	line-height: 85upx;
	border-radius: 85upx;
	font-size: 30upx
}